<template>
<div class="customerServer-box">
  <nav-bar title="客服1" />
  <div class="commission_details">
    <div class="list">
      <div class="avatar"></div>
      <div class="info">
        <div class="name">客服1</div>
        <div class="lastMsg other">
          我这个人脸盲，说实话，根本分不清谁漂亮谁不漂亮，我跟她在一起，不是因为她漂亮，因为我根本不知道她漂亮不漂亮。”
        </div>
      </div>
    </div>
    <div class="list">
      <div class="avatar"></div>
      <div class="info">
        <div class="name">客服2</div>
        <div class="lastMsg other">您好，您需要先充值才能抢单！</div>
      </div>
    </div>
    <div class="list">
      <div class="info t-r">
        <div class="lastMsg me">您好，您需要先充值才能抢单！您好，您需要先充值才能抢单！您好，您需要先充值才能抢单！</div>
        <div class="time">2019/4/4 12:45:23</div>
      </div>
      <div class="avatar"></div>
    </div>
  </div>
  <div class="commission_send bd-t">
    <span class="keyboard"></span>
    <div class="voice">按住说话</div>
    <span class="expression"></span>
    <span class="more"></span>
  </div>
</div>
</template>
<script>
export default {
  name: 'customerChat',
  data() {
    return {
      isLoading: false
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 500);
    }
  }
};
</script>
<style lang="less" scoped>
.customerServer-box{
  .commission_send{
    height:99px;
    position: fixed;
    left:0;
    right: 0;
    bottom:0;
    background:#fff;
    display: flex;
    span{
      display: block;
    }
    .voice{
      flex: 1;
      text-align: center;
      font-size: 30px;
      color: #838383;
      border-style: solid;
      border-color: #838383;
      border-width: 1px; /*no*/
      border-radius:10px;
      margin:13px 0;
      line-height: 74px;
    }
    .keyboard{
      margin: 32px 30px;
      width: 50px;
      height: 36px;
      background-image: url('../../assets/images/icon-keyboard.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
    }
    .expression{
      margin: 26px 0 0 30px;
      width: 50px;
      height: 50px;
      background-image: url('../../assets/images/icon-expression.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
    }
    .more{
      margin: 26px 30px;
      width: 50px;
      height: 50px;
      background-image: url('../../assets/images/icon-more.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
    }
  }
  .commission_details{
    padding-top: 12px;
    .list{
      display: flex;
      padding: 15px 0 5px;
    }
    .avatar{
      width:90px;
      height:90px;
      background:rgba(244,244,244,1);
      background-image: url('../../assets/images/icon-kf-avatar.png');
      background-position: center center;
      background-size: contain;
      background-repeat: no-repeat;
      border-radius:10px;
      margin:0 20px;
    }
    .info{
      flex: 1;
      padding-bottom:35px;
      .name{
        color: #4B4B4B;
        font-size: 24px;
      }
      .time{
        color: #838383;
        font-size: 24px;
        text-align: center;
        margin-top:20px;
      }
      .lastMsg{
        color: #212121;
        font-size: 30px;
        display: inline-block;
        margin-top:5px;
        background-color: #fff;
        padding: 14px 16px;
        border-radius: 8px;
        position: relative;
         &::before{
          content: '';
          display: block;
          position: absolute;
          top:24px;
          width:0;
          height:0;
        }
      }
      .lastMsg.other{
        margin-right: 100px;
        &::before{
          left:-9px;
          border-top:10px solid transparent;
          border-bottom:10px solid transparent;
          border-right:10px solid #fff;
        }
      }
      .lastMsg.me{
        margin-left: 100px;
        background-color: #2C64EF;
        color: #fff;
        text-align: left;
         &::before{
          content: '';
          right: -11px;
          border-top:10px solid transparent;
          border-bottom:10px solid transparent;
          border-left:10px solid #2C64EF;
         }
      }
    }
  }
}
</style>
